import React, { useEffect, useState } from 'react'
import { Tabs, List, Button } from 'antd-mobile'
import axios from 'axios'
import { TagType, State } from '../../store/reducer'
import { useSelector } from 'react-redux'
type Props = {}

const Index = (props: Props) => {
	const [allTags, setAllTags] = useState<TagType[]>([])
	const token = localStorage.getItem('token')
	const tags = useSelector((state: State) => state.tag )
	useEffect(() => {
		axios.get('/api/tags/all').then(resp => {
			console.log(resp.data);
			setAllTags(resp.data.data)
		})
	}, [])
	return (
		<div>
			<Tabs>
				<Tabs.Tab title='全部标签' key='fruits'>
					<List>
						{	
							allTags.length > 0 && allTags.map((v, i) => {
								return <List.Item key={i}>{v.name}</List.Item>
							})
						}
					</List>

				</Tabs.Tab>
				<Tabs.Tab title='关注标签' key='vegetables'>
					{
						token 
							? <List>
								{	
									tags.length > 0 && tags.map((v, i) => {
										return <List.Item key={i}>{v.name}</List.Item>
									})
								}
							</List>
							: <Button>未登录， 请登录！！</Button>
					}
				</Tabs.Tab>
			</Tabs>
		</div>
	)
}

export default Index